<template>
<div class="app-container">
    <!--工具栏-->
    <div class="head-container">
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <crudOperation :permission="permission" />
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
                <el-form-item label="姓名" prop="reportName">
                    <el-input v-model="form.reportName" style="width: 370px" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" filterable placeholder="请选择">
                        <el-option v-for="item in dict.性别" :key="item.id" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" style="width: 370px" />
                </el-form-item>
                <el-form-item label="科室" prop="department">
                    <el-select v-model="form.department.departmentId" filterable placeholder="请选择" @change="queryDoctorByDepartment(form.department.departmentId)">
                        <el-option v-for="item in departments" :key="item.departmentId" :label="item.department" :value="item.departmentId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="医生" prop="doctor">
                    <el-select v-model="form.doctor.doctorId" filterable placeholder="请选择" @change="queryRegisteredType(form.doctor.doctorId)">
                        <el-option v-for="item in doctors" :key="item.doctorId" :label="item.doctorName" :value="item.doctorId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号类别">
                    <el-input v-model="form.reportType.type" style="width: 370px" disabled />
                </el-form-item>
                <el-form-item label="挂号费">
                    <el-input v-model="form.price" style="width: 370px" disabled />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" style="width: 370px" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%" @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="reportId" label="单据号" />
            <el-table-column prop="reportName" label="姓名" />
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    {{ dict.label.性别[scope.row.sex] }}
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="department" label="科室">
                <template slot-scope="scope">
                    {{ scope.row.department.department }}
                </template>
            </el-table-column>
            <el-table-column prop="doctor" label="医生">
                <template slot-scope="scope">
                    {{ scope.row.doctor.doctorName }}
                </template>
            </el-table-column>
            <el-table-column prop="reportType" label="挂号类别">
                <template slot-scope="scope">
                    {{ scope.row.reportType.type }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="挂号费" />
            <el-table-column prop="state" label="状态" />
            <el-table-column prop="pathogeny" label="病因" />
            <el-table-column prop="createBy" label="创建者" />
            <el-table-column prop="updateBy" label="更新者" />
            <el-table-column prop="createTime" label="创建日期" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column v-if="checkPer(['admin', 'report:edit', 'report:del'])" label="操作" width="150px" align="center">
                <template slot-scope="scope">
                    <udOperation :data="scope.row" :permission="permission" />
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
    </div>
</div>
</template>

<script>
import crudReport from "@/api/his/report";
import CRUD, {
    presenter,
    header,
    form,
    crud
} from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import {
    initData
} from "@/api/data";
//提交的表单
const defaultForm = {
    reportId: null,
    reportName: null,
    sex: null,
    age: null,
    department: {
        departmentId: null
    },
    doctor: {
        doctorId: null
    },
    reportType: {
        registeredTypeId: null
    },
    price: null,
    time: null,
    users: null,
    state: null,
    phone: null,
    carId: null,
    pathogeny: null,
    createBy: null,
    updateBy: null,
    createTime: null,
    updateTime: null,
};
export default {
    name: "Report",
    components: {
        pagination,
        crudOperation,
        rrOperation,
        udOperation
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ["性别", "科室类型", "user_status", "挂号类型"],
    cruds() {
        return CRUD({
            title: "his:挂号表",
            url: "api/report",
            idField: "reportId",
            sort: "reportId,desc",
            crudMethod: {
                ...crudReport
            },
        });
    },
    created() {
        //预加载表单 科室列表
        this.queryDepartments();
    },
    data() {
        return {
            registered: {},
            departments: [],
            doctors: [],
            permission: {
                add: ["admin", "report:add"],
                edit: ["admin", "report:edit"],
                del: ["admin", "report:del"],
            },
            //表单校验
            rules: {
                reportName: [{
                    required: true,
                    message: "姓名不能为空",
                    trigger: "blur"
                }, ],
                sex: [{
                    required: true,
                    message: "性别不能为空",
                    trigger: "blur"
                }],
                age: [{
                    required: true,
                    message: "年龄不能为空",
                    trigger: "blur"
                }],
                department: [{
                    required: true,
                    message: "科室不能为空",
                    trigger: "blur"
                }, ],
                doctor: [{
                    required: true,
                    message: "医生不能为空",
                    trigger: "blur"
                }],
                reportType: [{
                    required: true,
                    message: "挂号类别不能为空",
                    trigger: "blur"
                }, ],
                phone: [{
                    required: true,
                    message: "手机号不能为空",
                    trigger: "blur"
                }],
            },
        };
    },
    methods: {

        // 钩子：在获取表格数据之前执行，false 则代表不获取数据
        [CRUD.HOOK.beforeRefresh]() {
            return true;
        },
        //查询所有科室
        queryDepartments() {
            initData("/api/departments")
                .then((res) => {
                    this.departments = res.content;
                })
                .catch((error) => {});
        },
        //根据所选科室id查询对应的医生
        queryDoctorByDepartment(departmentId) {
            initData("/api/doctor", {
                    departmentId: departmentId
                })
                .then((res) => {
                    this.doctors = res.content;
                })
                .catch((error) => {});
        },
        //根据所选医生返回对应的挂号id
        registeredTypeByDoctor(doctorId) {
            //找到对应的医生
            for (const item of this.doctors) {
                if (doctorId == item.doctorId) {
                    //返回他的挂号id
                    return item.registeredId;
                }
            }
        },
        //根据当下挂号id查到对应的挂号表的信息
        queryRegisteredType(doctorId) {
            initData("/api/registeredType", {
                    registeredTypeId: this.registeredTypeByDoctor(doctorId),
                })
                .then((res) => {
                    //将查到的值存到提交表单中
                    //挂号中文
                    this.form.reportType.type = res.content[0].type;
                    //挂号id
                    this.form.reportType.registeredTypeId = res.content[0].registeredTypeId;
                    //挂号价格
                    this.form.price = res.content[0].price;

                })
                .catch((error) => {});
        },
    },
};
</script>

<style scoped>
</style>
